<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录页面</title>
  <link rel="stylesheet" href="/node_modules/element-ui/lib/theme-chalk/index.css">
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%;
    }
    #app {
      display: flex;
      height: 100%;
      width: 100%;
      justify-content: center;
      align-items: center;
      background: url(/public/images/login-bg.jpg);
      background-size: 100% 100%;
    }
    .login-box {
      border: 1px solid #DCDFE6;
      width: 350px;
      padding: 35px 35px 15px 35px;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      box-shadow: 0 0 25px #909399;
      background: #fff;
    }

    .login-title {
      text-align: center;
      margin: 0 auto 40px auto;
      color: #303133;
    }
  </style>
</head>
<body>

  <div id="app">
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
    
  <script src="/node_modules/vue/dist/vue.js"></script>
  <script src="/node_modules/element-ui/lib/index.js"></script>
  <script src="/node_modules/axios/dist/axios.js"></script>
  <script src="/public/config/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data () {
        return {
          form: {
            username: '',
            // subtitle: '',
            password: ''
          },
          rules: {
            username: [ { required: true, message: '请输入账号', trigger: 'blur' }],
            password: [ { required: true, message: '请输入密码', trigger: 'blur' }]
          }
        }
      },
      methods: {
        async onSubmit (ref) {
          try {
            await this.$refs[ref].validate()
            // console.log(data)
            const { data } = await axios.post('/login', this.form)
            if (data.data) {
              localStorage.setItem('token', data.data)
              location.href = '/'
            } else {
              this.$message.info(data.msg || '登录错误')
            }
            console.log(data)
          } catch (error) {
            // console.dir(error)
          }
          
        }
      }
    })
  </script>
</body>
</html>